---
name: useDebounceFn
route: /useDebounceFn
menu: 'SideEffect'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';
import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

# useDebounceFn

用来处理防抖函数的 Hook。

## 代码演示

### 基础使用

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='基础使用' description='频繁调用 run，但只会在所有点击完成 500ms 后执行一次相关函数。'>
  <Demo1 />
</JackBox>

### 合理利用 deps

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='合理利用 deps' description='使用 deps 可以实现和 run 一样的效果。如果 deps 变化，会在所有变化完成 1000ms 后执行一次相关函数。'>
  <Demo2 />
</JackBox>

## API

```javascript
const {
  run,
  cancel
} = useDebounceFn(
  fn: (...args: any[]) => any,
  wait: number
);

const {
  run,
  cancel
} = useDebounceFn(
  fn: (...args: any[]) => any,
  deps: any[],
  wait: number
);
```

### Result

| 参数   | 说明                               | 类型                    |
|--------|------------------------------------|-------------------------|
| run    | 触发执行 fn，函数参数将会传递给 fn | (...args: any[]) => any |
| cancel | 取消当前防抖                       | () => void              |

### Params

| 参数 | 说明                                              | 类型                    | 默认值 |
|------|---------------------------------------------------|-------------------------|--------|
| fn   | 需要防抖执行的函数                                | (...args: any[]) => any | -      |
| deps | 依赖数组，如果数组变化，则会在等待时间后，触发 fn | any[]                   | -      |
| wait | 防抖等待时间，单位为毫秒                          | number                  | 1000   |